// pages/signStatus/signStatus.js
let util = require("../../utils/util.js");
let baseImgUrl = util.baseImgUrl;
let app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    networkStatus: true,
    loadingStatus: false,//默认加载完成，true--正在加载中
    loadgif: util.imgUrl + "loading.gif",//加载gif图
    loading: util.imgUrl + "loading.png",
    none_network: util.imgUrl + "none_network.png",

    status:false,//测试数据，用户的报名结果，false--正在审核中，true---审核成功
    greyshow: false,//是否显示分享的图片弹出框，默认为隐藏
    picurl:"",
    shut2: baseImgUrl + "shut2.png",
    isnone: baseImgUrl+"isnone_s.png",
      huodong:{
        id:1,
        title:"zheshi活动标题这是活动标题zheshi活动标题这是活动标题zheshi活动标题这是活动标题zheshi活动标题这是活动标题",
        baomingSrc: [baseImgUrl + "baoming_ing.png", baseImgUrl+"baoming_suc.png"],
      },
    wxPic: baseImgUrl +"wxPic.png",
    friendsPic: baseImgUrl +"friendsPic.png",
    tj_list:[{
      id:0,
      title:"推荐活动的标题推荐活动的标题推荐活动的标题推荐活动的标题推荐活动的标题推荐活动的标题",
      num:123,
      imgSrc: baseImgUrl+"huodongImg.png",
    }, {
        id: 0,
        title: "推荐活动的标题推荐活动的标题推荐活动的标题",
        num: 123,
        imgSrc: baseImgUrl + "huodongImg.png",
      }, {
        id: 0,
        title: "推荐活动的标题推荐活动的标题推荐活动的标题",
        num: 123,
        imgSrc: baseImgUrl + "huodongImg.png",
      }]
    // tj_list:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var that=this;

    /*********判断网络状态***************** */
    wx.getNetworkType({
      success: function (res) {
        var networkType = res.networkType;
        if (networkType == "none" || networkType == "unknown") {
          that.setData({
            networkStatus: false
          })
        } else {
          that.setData({
            networkStatus: true,
          })
          //访问接口
          wx.request({
            url: util.huodong_shenhe,
            data: {
              openid: app.globalData.openid,
              huodong_id: options.huodong_id,
            },
            success: function (res) {
              console.log(res);
              that.setData({
                huodong: res.data.huodong,
                tj_list: res.data.tj_list,
              })
            },
          })

        }
      }, fail: function (err) {
        console.log("获取网络失败" + err);
        that.setData({
          networkStatus: false
        })
      }
    })

    //测试用
    that.setData({
      loadingStatus: true
    })
    setTimeout(function () {
      that.setData({
        loadingStatus: false
      })
    }, 1500)

      //获取用户信息
      var userInfo = app.globalData.userInfo;
      //测试数据
      var username="未命名";
      var telphone="12345678910";//测试数据
      var gender="保密";
      if(userInfo){
        username = userInfo.nickName;
        gender = userInfo.gender == 1 ? "男" : "女";
      }
     
      that.setData({
        username: username,
        telphone:telphone,
        gender:gender
      })

      //2.获取海报的图片
      
      //请求接口获取海报背景图，如果没有背景图，则使用默认图片；
      //假设respicurl为返回的背景图路径
    var respicurl = util.imgUrl + "huodong_haibaoBg.png";
      var picurl;
    if (respicurl) {

      picurl = respicurl;

    } else {
      picurl = util.imgUrl + "huodong_haibaoBg.png";

    }
    that.setData({
      picurl:picurl
    })
  },
  /**********进入活动详情*********** */
  huodongDetail: function (e) {

    var thisid = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/huodongDetail/huodongDetail?thisid' + thisid,
    })
  },

  /****************点击更多优质活动****************/
  getmore:function(){
    wx.navigateTo({
      url: '/pages/huodong/huodong',
    })
  },

 
  //分享给朋友
  shareFriend: function () {
    wx.showShareMenu({
      withShareTicket: true
    })
  },

  //关闭分享图弹框
  shutgrey: function () {
    var that = this;
    that.setData({
      greyshow: false
    })
  },

  //显示分享选择菜单
  showchosemenu: function () {
    var that = this;
    that.setData({
      menushow: true
    })
  },
  //隐藏分享选择菜单
  hidechosemunu: function () {
    var that = this;
    that.setData({
      menushow: false
    })
  },



  /********点击分享朋友圈 生成图片*************/
  formSubmit: function (e) {
    console.log(e);
    var that = this;

    this.setData({
      menushow: false,

    });
    wx.showToast({
      title: '正在生成海报...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg();
      that.setData({
        greyshow: true
      });
    }, 2000)
  },

  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 690, 750);
    // context.fillRect(10, imageTop, imageWidth, imageHeight)

    /***********图片路径********************/
    var pathurl = that.data.picurl;//分享图背景图

    //绘制上部图片
    context.drawImage(pathurl, 0, 100, 375, 320);


    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片

    var path2 = app.globalData.userInfo.avatarUrl;//用户的头像图

    var path3 = util.kandianlogo;//同城看点logo图
    var path4 = util.erweima;//二维码图片
    var path5 = baseImgUrl + "friendsPic.png";//分享朋友圈图片
    var pathline = util.imgUrl + "shortline.png";//直线
    var nickname = app.globalData.userInfo.nickName;//作者名

    //绘制logo
    context.drawImage(path3, 210, 150, 150, 40);

    //不知道是什么原因，手机环境能正常显示
    // context.save(); // 保存当前context的状态


    //绘制名字
    context.setFontSize(26);
    context.setFillStyle('#333333');
    context.setTextAlign('left');
    context.font = "weight";
    /**********文章标题********/
    var newstitle = "that.data.newstitle";//测试用，实际使用去掉引号

    /**********换行**开始*******/
    var chr = newstitle.split("");//这个方法是将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    for (var a = 0; a < chr.length; a++) {
      if (context.measureText(temp).width < 345) {
        temp += chr[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);

    //如果数组长度大于2 则截取前两个
    if (row.length > 2) {
      var rowCut = row.slice(0, 2);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (context.measureText(test).width < 330) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
      rowCut.splice(1, 1, group);
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      context.fillText(row[b], 15, 460 + b * 40, 345);

    }
    context.stroke();

    //绘制直线
    context.drawImage(pathline, 15, 520, 345, 1, 82);
    context.setFillStyle('#efefef');
    context.stroke();

    //绘制左下角二维码
    context.drawImage(path4, 15, 530, 100, 120);
    context.setFillStyle('#efefef');
    context.stroke();

    //绘制右下角上侧文字
    context.setFontSize(14);
    context.setFillStyle('#333');
    context.setTextAlign('left');


    /**********用户名**开始*******/

    nickname = nickname.split("");//这个方法是将一个字符串分割成字符串数组
    var temp2 = "";
    var row2 = [];

    for (var a = 0; a < nickname.length; a++) {
      if (context.measureText(temp2).width < 70) {
        temp2 += nickname[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失
        row2.push(temp2);
        temp2 = "";
      }
    }
    row2.push(temp2);
    console.log("row2" + row2);

    //如果数组长度大于1 则截取第1个
    if (row2.length > 1) {
      var rowCut2 = row2.slice(0, 1);//第一条需要截取的字符
      console.log(rowCut2);
      var rowPart2 = rowCut2[0];
      console.log("rowPart2" + rowPart2)
      var test2 = "";
      var empty2 = [];
      for (var a = 0; a < rowPart2.length; a++) {
        if (context.measureText(test2).width < 60) {
          test2 += rowPart2[a];
        }
        else {
          break;
        }
      }
      empty2.push(test2);
      console.log(empty2);
      var group2 = empty2[0] + "..."//

      rowCut2.splice(0, 1, group2);


      context.fillText(rowCut2[0], 190, 570, 70);
    } else {
      context.fillText(row2, 190, 570, 70);
    }


    context.stroke();


    /*****************************************/
    context.setFontSize(14);
    context.setFillStyle('#666');
    context.setTextAlign('left');
    context.fillText("正在参加此活动", 270, 570, 164);
    context.stroke();

    //绘制右下角下侧文字
    context.setFontSize(14);
    context.setFillStyle('#666');
    context.setTextAlign('left');
    context.fillText("识别小程序，进入", 130, 630);
    context.stroke();

    context.setFontSize(14);
    context.setFillStyle('#ff1313');
    context.setTextAlign('left');
    context.fillText("同城看点", 241, 630);
    context.stroke();

    context.setFontSize(14);
    context.setFillStyle('#666');
    context.setTextAlign('left');
    context.fillText("参加活动", 300, 630);
    context.stroke();

    //绘制右下角上侧logo图
    context.arc(155, 565, 25, 0, 2 * Math.PI) //画出圆
    context.strokeStyle = "#efefef";
    context.clip(); //裁剪上面的圆形

    context.drawImage(path2, 130, 540, 50, 50, 50, 50);
    context.setFillStyle('#efefef');
    context.stroke();
    context.stroke();

    context.draw();


    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 133,
        width: 690,
        height: 750,
        destHeight: 750,
        destWidth: 690,
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
          that.baocun();
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },

  //点击保存到相册
  baocun: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        console.log("图片保存成功")
        // wx.showModal({
        //   content: '图片已保存到相册，赶紧晒一下吧~',
        //   showCancel: false,
        //   confirmText: '好的',
        //   confirmColor: '#333',
        //   success: function (res) {
        //     if (res.confirm) {
        //       console.log('用户点击确定');
        //       /* 该隐藏的隐藏 */
        //       that.setData({
        //         maskHidden: false
        //       })
        //     }
        //   }, fail: function (res) {
        //     console.log(11111)
        //   }
        // })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})